<template>
  <div class="video-wrap"  @click="handleClosePreview" >
			<video :src="videoUrl" controls="controls" class="video" autoplay></video>
  </div>
</template>
<script>
  export default {
		name: 'y-video',
		data() {
			return {

			}
		},
		props: {
			videoUrl: String,

		},
		methods: {
			handleClosePreview() {
				this.$emit('handleClosePreview');
			}
		},
		created() {
			console.log('videoUrl', this.videoUrl);
		}
  }
</script>
<style scoped  type="text/css">
	.video-wrap {
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		& .video {
			width: 100%;
			height: 80%;
		}
	}
</style>
